import { createRouter, createWebHistory } from 'vue-router';
import { useLoginModal } from '@/composables/useLoginModal';
import { computed } from 'vue';
import { useUserStore } from '@/store/user';
import { activityRoute } from '@/router/activityRoute';

const routes = [
  {
    path: '/',
    name: 'Home',
    meta: {
      title: 'HOME',
      description: 'Nex Group',
      icon: 'home',
    },
    component: () => import('@/layouts/DefaultLayout.vue'),
    children: [
      ...activityRoute,
      {
        path: '',
        name: 'HomePage',
        meta: {
          showInNav: true,
        },
        component: () => import('@/views/home/index.vue'),
      },
      // {
      //   path: '/qshop',
      //   name: 'QShop',
      //   component: () => import('@/views/qshop/index.vue'),
      // },

      {
        path: '/group',
        name: 'Group',
        component: () => import('@/views/group/index.vue'),
      },

      {
        path: '/designer',
        name: 'Designer',
        component: () => import('@/views/designer/index.vue'),
      },

      {
        path: '/product',
        name: 'Product',
        meta: {
          isLogin: true,
        },
        component: () => import('@/views/product/index.vue'),
      },

      {
        path: '/contest',
        name: 'Contest',
        meta: {
          isLogin: true,
        },
        component: () => import('@/views/contest/index.vue'),
      },
      {
        path: '/contest/detail',
        name: 'ContestDetail',
        component: () => import('@/views/contest/detail.vue'),
      },
      {
        path: '/detail',
        name: 'Detail',
        component: () => import('@/views/detail/index.vue'),
      },
      {
        path: '/profile',
        name: 'Profile',
        component: () => import('@/views/user/profile.vue'),
      },
      {
        path: '/settings',
        name: 'Settings',
        component: () => import('@/views/user/settings.vue'),
      },
      {
        path: '/productDetail',
        name: 'productDetail',
        component: () => import('@/views/product/productDetail.vue'),
      },
      {
        path: '/orders',
        name: 'Orders',
        component: () => import('@/views/user/order.vue'),
      },
      {
        path: '/search',
        name: 'HomeSearch',
        meta: {
          isLogin: true,
        },
        component: () => import('@/views/home/search.vue'),
      },
      {
        path: '/terms',
        name: 'terms',
        component: () => import('@/views/terms/terms.vue'),
      },
      {
        path: '/privacy',
        name: 'privacy',
        component: () => import('@/views/terms/privacy.vue'),
      },
      {
        path: '/aboutUS',
        name: 'aboutUS',
        component: () => import('@/views/terms/aboutUS.vue'),
      },
      {
        path: '/cookiePolicy',
        name: 'cookiePolicy',
        component: () => import('@/views/terms/cookiePolicy.vue'),
      },
      {
        path: '/guidelines',
        name: 'guidelines',
        component: () => import('@/views/terms/guidelines.vue'),
      },
    ],
  },
  {
    path: '/generator',
    name: 'Generator',
    meta: {
      title: 'Generator',
      description: 'Generator',
      showInNav: true,
      icon: 'home',
      isLogin: true,
    },
    component: () => import('@/views/ai/AiLayout.vue'),
    children: [
      {
        path: '',
        redirect: '/generator/txt2img',
      },
      {
        path: 'txt2img',
        name: 'Text2Image',
        component: () => import('@/views/ai/txt/index.vue'),
      },
      {
        path: 'img2img',
        name: 'Image2Image',
        component: () => import('@/views/ai/img/index.vue'),
      },
      {
        path: 'edit',
        name: 'EditImage',
        component: () => import('@/views/ai/edit/index.vue'),
      },
      {
        path: 'hd',
        name: 'HdImage',
        component: () => import('@/views/ai/hd/index.vue'),
      },
      {
        path: 'history',
        name: 'HistoryImage',
        component: () => import('@/views/ai/history/index.vue'),
      },
      {
        path: 'detail',
        name: 'DetailImage',
        component: () => import('@/views/ai/detail.vue'),
      },
    ],
  },
  {
    path: '/login',
    name: 'Login',
    meta: {
      title: 'Login',
      description: 'Login',
      showInNav: true,
      icon: 'store',
    },
    component: () => import('@/views/login.vue'),
  },
  {
    path: '/payPage',
    name: 'payPage',
    meta: {
      title: 'payPage',
      description: 'payPage',
      showInNav: true,
      icon: 'store',
    },
    component: () => import('@/views/payPage/payPage.vue'),
  },
  {
    path: '/product/3dPhoto',
    name: '3dPhoto',
    meta: {
      title: '3dPhoto',
      description: '3dPhoto',
      showInNav: true,
      icon: 'store',
    },
    component: () => import('@/views/product/3dPhoto.vue'),
  },
];
const router = createRouter({
  history: createWebHistory(),
  routes,
  linkExactActiveClass: 'text-yellow',
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    }
    return false;
  },
});

// 全局前置守卫：权限控制
router.beforeEach((to, from) => {
  const userStore = useUserStore();
  const userInfo = computed(() => userStore.user);
  const isLoggedIn = computed(() => userStore.isAuthenticated);
  // 判断目标路由是否需要登录（通过 meta.isLogin 标记）
  if (to.meta.isLogin) {
    if (!isLoggedIn.value || !userInfo.value) {
      const { showModal } = useLoginModal();
      showModal(() => {
        router.push({ path: to.path, query: to.query });
      });
      return false;
    }
  }
  return true; // 已登录/无需登录，放行
});

router.afterEach((to) => {
  if (window.gtag) {
    window.gtag('event', 'page_view', {
      page_title: to.name,
      page_path: to.fullPath,
    });
  } else {
    console.warn('gtag not loaded yet===');
  }
});

export default router;
